<template>
	<view>
		<!-- 顶部导航 -->
		<fa-navbar :title="vuex_table_title || '榕商风采'" :border-bottom="false"></fa-navbar>
		<!-- 轮播图 -->

		<view class="swiper_center">
			<u-swiper :title="true" height="360"  :list="businessList" @click="openPage"></u-swiper>

		      <!--  <u-swiper
		                :list="businessList"
		                previousMargin="30"
		                nextMargin="30"
		                circular
						height="400"
		                :autoplay="false"
		                radius="5"
		                bgColor="#ffffff"
		        ></u-swiper> -->
		</view>
		<view class="conter">
			<view class="person">
				<view class="person_box" v-for="(item, index) in  archivesList.slice(0,5)" :key="index" @click="goDetail(item)">
					<u-avatar
						size="140"
						:src="item.image"
					></u-avatar>
					<view class="person_name">
						{{item.name?item.name:''}}
					</view>
					<view class="person_duty">
						{{item.company?item.company:''}}
					</view>
				</view>
			</view>
		</view>
		<view class="newsBody" v-for="(item,index) in archivesList" :key="index" @click="goDetail(item)">
			<view class="newsTitle">
				<view class="newsAfter"></view>
				<view class="newsTxt u-line-1" >
					{{item.title}}
				</view>
			</view>
			<view class="newsMain u-line-1">
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<view class="u-p-b-30" v-if="archivesList.length">
			<u-loadmore bg-color="#f4f6f8" :status="has_more ? status : 'nomore'" />
		</view>
	</view>
</template>

<script>
export default {
	computed: {
		businessList() {
			console.log(this.vuex_config.businessList,'this.vuex_config.businessList')
			console.log(this.vuex_config,'this.vuex_config')
			if (this.vuex_config.businessList) {
				return this.vuex_config.businessList;
			}
			return [];
		}
	},
	data() {
		return {
			page:1,
			params:'',
			query:'',
			channel_id:'',
			filterList:[],
			orderList:[],
			channel:'',
			archivesList:[]
		};
	},
	onLoad(e) {
		let query = e
		if (JSON.stringify(query) == '{}') {
			query = e;
		}
		if(query && JSON.stringify(query) != '{}'){
			this.params = query;
		}else{
			this.params = {
				channel:-1,
				model:-1
			}
		}
		this.getArchives()
		console.log(this.archivesList,'archivesListarchivesList')
	},
	onShow() {
		
	},
	methods: {
		getArchives: async function() {
			let data = {
				page: this.page,				
				...this.params,
				...this.query
			};			
			if (this.channel_id) {
				data.channel = this.channel_id;
			}			
			let res = await this.$api.getArchives(data);
			this.status = 'nomore';
			uni.stopPullDownRefresh();
			if (!res.code) {
				return;
			}
			console.log(res.data,'res.data')
			let {filterList,orderList,pageList,channel} = res.data;
			this.filterList = filterList;
			this.orderList = orderList;
			this.channel = channel;
			// #ifdef MP-BAIDU
			if(this.channel){
				this.setPagesInfo();
			}
			// #endif
			if (this.is_update) {
				this.is_update = false;
				this.archivesList = [];
			}
			this.is_show = true;
			this.has_more = pageList.current_page<pageList.last_page;
			console.log(this.archivesList,'this.archivesList',pageList.data,'pageList.data',pageList.current_page,'pageList.current_page',)
			if(this.archivesList){
				this.archivesList = [...this.archivesList, ...pageList.data];
			}else {
				this.archivesList = [...pageList.data];
			}
			this.is_empty = !this.archivesList.length;
			console.log(this.archivesList,'this.archivesList',this.is_empty,'is_empty.is_empty')
		},
		// #ifdef MP-BAIDU
		setPagesInfo() {
			swan.setPageInfo({
				title:this.channel.seotitle,
				keywords: this.channel.keywords,
				description:this.channel.description,
				releaseDate: this.$u.timeFormat(this.channel.createtime, 'yyyy-mm-dd hh:MM:ss'),
				image: this.channel.image,			
				success: res => {
					console.log('setPageInfo success', res);
				},
				fail: err => {
					console.log('setPageInfo fail', err);
				}
			});
		},
		// #endif
		goDetail(item) {
			this.$u.route('/pages/article/detail', {
				id: item.id,
				tap: 2
			});
		}
},
	onPageScroll(e) {
	},
	//下拉刷新
	onPullDownRefresh() {
	},
	onReachBottom() {
	}
};
</script>

<style lang="scss">
page {
	background-color: #f1f1f1;
	color: balck;
	.swiper_box{
		width: 100%;
		height: 350rpx;
		position: relative;
		.swiper_bgbox {
			width: 100%;
			height: 250rpx;
			position: absolute;
			background-color: #9b0f0f;
		}
	}
	.swiper_center{
		background-color: #d9001b;
		
	}
	.conter{
		height: 300rpx;
		overflow: hidden;
		margin-bottom: 40rpx;
		.person {
			width: 100%;
			display: flex;
			align-items: center;
			overflow-y: auto;
			flex-wrap: nowrap;
			white-space: nowrap;
			.person_box {
				width: 250rpx;
				height: 300rpx;
				background-color: white;
				font-size: 22rpx;
				color: #b1b1b1;
				text-align: center;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				padding: 20rpx;
				margin: 20rpx 0 0 20rpx;
				background-color: #fff;
				.person_name {
					font-size: 30rpx;
					color: black;
					font-weight: bold;
					text-align: center;
					white-space:nowrap;
					text-overflow:ellipsis;
					-o-text-overflow:ellipsis;
					overflow:hidden;
				}
			}
		}
	}
	.newsBody {
		width: 100%;
		height: 100rpx;
		background-color: white;
		margin-bottom: 20rpx;
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 40rpx;
		.newsTitle {
			width: 80%;
			font-size: 30rpx;
			display: flex;
			align-items: center;
			padding: 10rpx 10rpx;
			.newsAfter {
				width: 20rpx;
				height: 28rpx;
				margin: 0 10rpx;
				background-color: #d9001b;
			}
		}
		.newsMain {
			padding: 0 35rpx;
		}
	}
	.person_duty{
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.newsTxt {
		width: 450rpx;
	}
}
</style>
